<template>
	<view class="pug-share-container">
		<view class="pug-share-box" :class="[show?'expand':'close']">
			<view class="itembox">
				<view class="item" @click="handleWeixin">
					<view class="iconbox"><icon class="siconfont icon-weixin"></icon></view>
					<text>微信</text>
				</view>
				<view class="item"  @click="handleQQ">
					<view class="iconbox"><icon class="siconfont icon-qq"></icon></view>
					<text>QQ</text>
				</view>
			</view>
		</view>
		<view v-show="show" @click="show=false" class="pug-share-box-overlay"></view>
	</view>
</template>


<script>
	export default {
		name:"pug-share",
		data() {
			return {
				// 控制分享组件
				show:false,
				// 控制海报是否显示
				isshow:false
			}
		},
		methods:{
			handleOpen(){
				this.show = true;
			},
			
			handleWeixin(){
				this.openApp('weixin://')
			},
			
			handleQQ(){
				this.openApp("mqq://im/chat")
			},
			
			// 打开应用
			openApp(appurl) {
				// #ifdef APP-PLUS
				plus.runtime.openURL(appurl, function(res) {
				});
				// #endif
				// #ifdef H5
				window.open(appurl);
				// #endif
			}
			
		}
	}
</script>

<style lang="scss">
/* 下面我们会解释这些 class 是做什么的 */
.pug-share-container{
	position: relative;
	z-index: 500;
	
	.pug-share-box{
		position: fixed;
		left:0;
		right:0;
		bottom:-100%;
		background:#f7f8fa;
		border-radius: 20rpx;
		z-index: 2;
		.line{
			height: 1px;
			width: 100vw;
			background:#eee;
		}
		.itembox{
			padding:40rpx 30rpx 0;
			display: grid;
			grid-template-columns: repeat(5,1fr);
			grid-template-rows: repeat(2,auto);
			text-align: center;
			gap:10rpx;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 20px;
				.iconbox{
					width: 56px;
					height: 52px;
					background:#fff;
					text-align: center;
					line-height: 52px;
					border-radius: 20rpx;
					icon{font-size:28px;}
					margin-bottom: 10px;
				}
				text{font-size:22rpx;color:#b8b8b8;}
			}
		}
		
		.itembox2{
			padding:20rpx 30rpx 48rpx;
			flex-wrap: wrap;
		}
	}
	
	
	.pug-share-box.expand{
		bottom:0;
		transition: 300ms ease;
	}
	
	.pug-share-box.close{
		bottom:-100%;
		transition: 300ms ease;
	}
	
	
	/*遮罩层*/	
	.pug-share-box-overlay{
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index: 1;
		background:rgba(0,0,0, 0.2);
		
	}
}

</style>

